{% extends 'mockserver.html' %}
{% block bodys %}
    {% import "fenye.html" as macros %}
    <div class="tpl-portlet-components">
        <div class="portlet-title">
            <div class="caption font-green bold" style="margin-top: 5%">
                <span class="am-icon-code"></span> mockserver
            </div>
        </div>
        <div class="mockser" style="margin-top: 5%" >
            <div class="tpl-content-page-title">
                {% with messages = get_flashed_messages() %}
                    {% if messages %}
                        <ul class='flashes'>
                            {% for message in messages %}
                                <li style="color:red" >{{ message }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                {% endwith %}
            </div>
            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <a onclick="addmock()">
                                    <input  type="button" class="am-btn am-btn-default am-btn-success" value="增加">
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
                <table class="am-table am-table-striped am-table-hover table-main " style="">
                    <caption>
                        <strong></strong>
                    </caption>
                    <thead>
                    <tr>
                        <th>接口名</th>
                        <th>接口描述</th>
                        <th>接口路径</th>
                        <th>请求方式</th>
                        <th>类型</th>
                        <th>更新时间</th>
                        <th>是否校验</th>
                        <th>请求头校验</th>
                        <th>状态</th>
                        <th>创建人</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>{% for int in inte %}
                        <tr  >
                            <td onclick="show({{ int.id }})">
                                <label class="label-primary" style="background: white">{{ int.name }}
                                </label>
                            </td>
                            <td>
                                <label class="label-primary" style="background: white">{{ int.description }}
                                </label>
                            </td>
                            {% if int.status==1 %}
                                <td>
                                    <a href="{{ url_for('mock.mackserver',path=int.path) }}" target="_blank">{{ int.path }}</a>
                                </td>
                            {% else %}
                                <td>{{ int.path }}</td>
                            {% endif %}
                            <td onclick="show({{ int.id }})">
                                <label class="label-primary" style="background: white">{{ int.methods }}</label>
                            </td>
                            <td style="width: 10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                <label class="label-primary" style="background: white">{{ int.rebacktype }}
                                </label>
                            </td>
                            <td>
                                <label class="label-primary" style="background: white">{{(int.update_time)}}</label>
                            </td>
                            {% if int.ischeck ==0  %}
                                <td>否</td>
                            {% elif int.ischeck==1 %}
                                <td>是</td>
                            {% endif %}
                            {% if int.is_headers==0 %}
                                <td>
                                    <label class="label-primary" style="background: white">
                                        <i class="am-icon-check"></i>
                                    </label>
                                </td>
                            {% elif int.is_headers==1 %}
                                <td>
                                    <label class="label-primary" style="background: white">
                                        <i class="am-icon-close"></i>
                                    </label>
                                </td>
                            {% endif %}
                            {% if int.status==0 %}
                                <td>
                                    <label class="label-primary" style="background: white">
                                        <a href="{{ url_for('mock.startmock',id=int.id) }}">
                                            <i class="am-icon-lock"></i>
                                        </a>
                                    </label>
                                </td>
                            {% elif int.status==1 %}
                                <td><label class="label-primary" style="background: white">
                                    <a href="{{ url_for('mock.closemock',id=int.id) }}">
                                        <i class="am-icon-unlock"></i>
                                    </a>
                                </label>
                                </td>
                            {% endif %}
                            <td>
                                <label class="label-primary" style="background: white">{{ int.users }}</label>
                            </td>
                            <td>
                                <span>
                                    <a href="{{ url_for('mock.editmockserver',id=int.id) }}">
                                        <i class="am-icon-edit"></i></a></span>  {%if current_user.role_id !=1 and current_user.role_id !=None  %}
                                <span>
                                    <button onclick="deleteproject({{ int.id }})">
                                        <i class="am-icon-remove"></i>
                                    </button>
                                </span>
                            {%endif%}
                            </td>
                        </tr>
                        <tr  style="width:10px;display: none"  id="{{ int.id }}">
                            <td colspan="8">
                                <div class="tr-detail">
                                    <div class="dt-cont">
                                        <b>请求参数：</b>
                                        <span class="dt-cont-s">{{ int.params|safe }}</span>
                                    </div>
                                    <div class="dt-cont">
                                        <b>预期返回：</b>
                                        <span class="dt-cont-y">{{ int.fanhui|safe }}</span>
                                    </div>
                                    <div class="dt-cont">
                                        <b>请求头：</b>
                                        <span class="dt-cont-y">{{ int.headers|safe }}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div>
                <p class="pagination" style="margin-left: 24%;">
                    {{macros.pagination_widget(pagination,'.mockservers')}}
                </p>
            </div>
        </div>
    </div>
     <div style="display:none;position:fixed;z-index: 210;width: 800px;top: 100px;left: 20%;box-shadow: 0 0 10px rgba(0,0,0,0.6);border: solid 1px #255c71;border-radius: 5px 5px 0 0;background-color: #9eacb4"  id="addmock">
        <div style="height: 5px;">添加mock接口</div>
        <div style="background-color: whitesmoke;margin-top: 24px" >
           <p>mock接口名字：
                        <input type="text" placeholder="请输入mock接口名字" id="name"></p>
                    <p> mock接口描述：
                        <input type="text" placeholder="请输入mock接口描述" id="desc"></p>
                    <p> mock 接口路径：
                        <input type="text" placeholder="请输入mock接口路径" id="path"></p>
                    <p>  mock接口请求方式：
                        <select id="meth" class="select2-results">
                            <option>get</option>
                            <option>post</option>
                            <option>delete</option>
                            <option>put</option>
                            <option>push</option>
                        </select>
                    </p>
                    <p>mock接口类型参数：<select id="type">
                        <option>json</option>
                        <option>xml</option>
                    </select>
                    </p>
                    <p>mock接口请求头：
                        <textarea id="headers" style="width: 200px;height: 100px;"></textarea>
                    </p>
                    <p>mock接口请求参数：
                        <textarea id="parm"  style="width: 200px;height: 100px;">
                        </textarea>
                    </p>
                    <p>mock接口返回参数：
                        <textarea id="back" style="width: 200px;height: 100px;"></textarea>
                    </p>
                    <p>mock接口是否校验：<select id="checkout">
                        <option>是</option>
                        <option>否</option>
                    </select>
                    </p>
                    <p>mock接口是否校验请求头：
                        <select id="checkouheaders">
                            <option>是</option>
                            <option>否</option>
                        </select>
                    </p>
                    <p>mock接口是否开启：
                        <select id="kaiqi">
                            <option>是</option>
                            <option>否</option>
                        </select>
                    </p>
        </div>
        <div style="margin-top: 1%;margin-bottom: auto">
            <input value="添加" type="button" class="btn-default"  onclick="add_mock()" >
            <input value="取消" type="button" class=" btn-default"  onclick="guanbi()" >
        </div>
    </div>
    <script type="application/javascript">
        function show(id) {
            var obj=document.getElementById(id);
            if (obj.style.display =='none'){
                obj.style.display ='';
            }else {
                obj.style.display ='none';
            }
        }
        function addmock() {
            var  dakai=document.getElementById('addmock');
            dakai.style.display='';
        }
        function  guanbi() {
            var dakai=document.getElementById('addmock');
            dakai.style.display='none'
        }
        function  add_mock() {
            var  name=document.getElementById('name');
            var desc=document.getElementById('desc');
            var  path=document.getElementById('path');
            var headers=document.getElementById('headers');
            var parm=document.getElementById('parm');
            var back=document.getElementById('back');
            var obj = document.getElementById('meth');
            var index=obj.selectedIndex;
            var meth = obj.options[index].value;
            var ob = document.getElementById('type');
            var inde=ob.selectedIndex;
            var type = ob.options[inde].value;
            var obd = document.getElementById('checkout');
            var ind=obd.selectedIndex;
            var checkout = obd.options[ind].value;
            var obds = document.getElementById('checkouheaders');
            var insd=obds.selectedIndex;
            var checkouheaders = obds.options[insd].value;
            var kaiqis = document.getElementById('kaiqi');
            var insds=kaiqis.selectedIndex;
            var kaiqi = kaiqis.options[insds].value;
            if(name.value.length<1){
                alert('mock接口的名字不能为空');
            }else {
                if(path.value.length<1){
                    alert('mock接口的路径不能为空');
                }else {
                    if(parm.value.length<1){
                        alert('mock接口的参数不能为空');
                    }else {
                        if(back.value.length<1){
                            alert('mock接口的返回参数不能为空');
                        }else {
                            if(meth.length<1){
                                alert('mock接口请求方式不能为空！');
                            }else {
                                var data={};
                                data['name']=name.value;
                                data['desc']=desc.value;
                                data['path']=path.value;
                                data['headers']=headers.value;
                                data['parm']=parm.value;
                                data['back']=back.value;
                                data['meth']=meth;
                                data['type']=type;
                                data['checkout']=checkout;
                                data['checkouheaders']=checkouheaders;
                                data['kaiqi']=kaiqi;
                                $.ajax({
                                    url: '{{ url_for('home.mockserver') }}',
                                    type: 'POST',
                                    data:  JSON.stringify(data),
                                    contentType: 'application/json; charset=UTF-8',
                                    processData: false,
                                    success: function (result) {
                                        if(result['code']==2){
                                            alert(result['data']);
                                            location.reload()
                                        }
                                        else{
                                            alert(result['data']);
                                        }
                                    }
                                });
                            }
                        }
                    }
                }
            }
        }
        function deleteproject(id) {
            $.ajax({
                url:'{{url_for( 'home.mockserver') }}',
                type:'DELETE',
                data:id,
                contentType: 'application/json; charset=UTF-8',
                processData:false,
                success:function(data){
                    if(data['code']!=2){
                        alert(data['data'])
                    }else{
                        alert(data['data']);
                        location.reload()
                    }
                }
            })
        }
    </script>
{% endblock %}